<template>
  <h1>人的信息</h1>
  <h2>姓：{{ person.firstname }}</h2>
  <h2>名：{{ person.lastname }}</h2>
  <h2>全名：{{ person.fullname }}</h2>
  <input type="text" v-model="person.fullname" />
</template>
  
  <script>
import { reactive, computed } from "vue";
export default {
  name: "App",
  components: {},

  setup(props, context) {
    let person = reactive({
      firstname: "张",
      lastname: "三",
    });
    // 只读的计算属性
    // person.fullname=computed(() => {
    //   return person.firstname + '-' +person.lastname
    // })
    // 读写
    person.fullname = computed({
      get()  {
        return person.firstname + "-" + person.lastname;
      },
      set(value){
        const nameArr=value.split('-')
        person.firstname=nameArr[0]
        person.lastname=nameArr[1]
      },
    });
    return { person };
  },
};
</script>
  
  <style>
</style>
  